<template>
  <div class="app-container">
    <el-card>
      <el-form :model="queryGoodsList" :inline="true" label-width="68px">
        <el-form-item label="时间">
          <el-date-picker clearable v-model="timeList" type="datetimerange" range-separator="~"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                          @change="getGoodsQuery">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="商品名称">
          <el-input v-model="queryGoodsList.spmch" placeholder="请输入商品名称" clearable></el-input>
        </el-form-item>
        <el-form-item label="批号">
          <el-input v-model="queryGoodsList.batchCode" placeholder="请输入批号" clearable></el-input>
        </el-form-item>
        <el-form-item label="操作人">
          <el-input v-model="queryGoodsList.userName" placeholder="请输入操作人" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" v-hasPermi="['storeM:storeCheck:query']"
                     @click="getGoodsQuery">查询
          </el-button>
          <el-button type="danger" icon="el-icon-refresh" @click="clearAll">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card>
      <el-table :data="goodsList" border height="605px" id="data-table">
        <el-table-column show-overflow-tooltip prop="spmch" label="商品名称" align="center"></el-table-column>
        <el-table-column show-overflow-tooltip prop="spbh" label="商品编号" align="center" width="90"></el-table-column>
        <el-table-column show-overflow-tooltip prop="batchCode" label="批号" align="center" width="100"></el-table-column>
        <el-table-column show-overflow-tooltip prop="shpgg" label="规格" align="center" width="150"></el-table-column>
        <el-table-column show-overflow-tooltip prop="dw" label="单位" align="center" width="50"></el-table-column>
        <el-table-column show-overflow-tooltip prop="fromJwh" label="原货位号" align="center"
                         width="125"></el-table-column>
        <el-table-column show-overflow-tooltip prop="toJwh" label="原货位号" align="center"
                         width="125"></el-table-column>
        <el-table-column show-overflow-tooltip prop="expDate" label="有效期" align="center"
                         width="100"></el-table-column>
        <el-table-column show-overflow-tooltip prop="pdDate" label="生产日期" align="center"
                         width="100"></el-table-column>
        <el-table-column show-overflow-tooltip prop="operateTime" label="操作日期" align="center"></el-table-column>
        <el-table-column show-overflow-tooltip prop="fromAreaName" label="原库区名称" align="center"
                         width="125"></el-table-column>
        <el-table-column show-overflow-tooltip prop="toAreaName" label="目标库区名称" align="center"
                         width="125"></el-table-column>
        <el-table-column show-overflow-tooltip prop="userId" label="操作人" align="center" width="80"></el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="primary" size="mini"
                       @click="openRow(scope.row)">详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination background layout=" total,prev, pager, next, sizes,jumper" @size-change="handleSizeChange"
                     @current-change="handleCurrentChange" :current-page="pageNum" :page-size="pageSize"
                     :page-sizes="[100,150,200,500]" :total="total">
      </el-pagination>
    </el-card>
    <el-dialog title="描述详情" :visible="visible" width="50%" @close="handleClose">
      <el-form ref="billForm" :model="billForm" size="medium" label-width="100px">
        <el-row :gutter="15">
          <el-col :span="24">
            <el-form-item label="描述" prop="desc">
              <el-input type="textarea" v-model="billForm.desc"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleClose">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  queryWarehouseMoveList
} from '@/api/storeM/yxl.js'

export default {
  data() {
    return {
      queryGoodsList: {
        userName: '',//操作人
        spmch: '',//商品名称
        batchCode: '',//批号
      },
      timeList: [this.getDefaultStartDate(), this.getDefaultEndDate()], //时间合计
      visible: false,
      goodsList: [],
      pageNum: 1,
      pageSize: 100,
      total: 0,
      billForm: {
        desc: ''
      }
    }
  },
  created() {
    this.getGoods();
  },
  methods: {
    //查看描述
    openRow(row) {
      this.visible = true;
      this.billForm.desc = row.desc;
      this.billForm.desc = this.billForm.desc.replace(/\s+/g, '');
    },
    //弹框关闭
    handleClose() {
      this.visible = false;
      this.$nextTick(() => {
        this.$refs.billForm.resetFields();
      })
    },
    //分页
    handleSizeChange(newsize) {
      this.pageNum = 1;
      this.pageSize = newsize;
      this.getGoods();
    },
    handleCurrentChange(newpage) {
      this.pageNum = newpage;
      this.getGoods();
    },
    //查询
    getGoodsQuery() {
      this.getGoods();
    },
    //获取日期
    getDefaultStartDate() {
      const date = new Date()
      date.setMonth(date.getMonth() - 1)
      return this.formatDate(date)
    },
    getDefaultEndDate() {
      return this.formatDate(new Date())
    },
    //格式化日期
    formatDate(date) {
      const year = date.getFullYear()
      const month = String(date.getMonth() + 1).padStart(2, '0')
      const day = String(date.getDate()).padStart(2, '0')
      return `${year}-${month}-${day}`
    },
    getGoods() {
      if (this.timeList && this.timeList[0]) {
        this.queryGoodsList.startDate = this.timeList[0];
      } else {
        delete this.queryGoodsList.startDate; // 如果时间为空，则删除该字段
      }
      if (this.timeList && this.timeList[1]) {
        this.queryGoodsList.endDate = this.timeList[1];
      } else {
        delete this.queryGoodsList.endDate; // 如果时间为空，则删除该字段
      }
      let params = {
        ...this.queryGoodsList,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }
      queryWarehouseMoveList(params).then(res => {
        this.goodsList = res.rows;
        this.total = res.total;
      })
    },
    clearAll() {
      this.queryGoodsList.userName = ''; //清空操作人
      this.queryGoodsList.spmch = ''; //清空商品名
      this.queryGoodsList.batchCode = ''; //清空批号
      this.timeList = [this.getDefaultStartDate(), this.getDefaultEndDate()]//时间合计
      this.getGoodsQuery();
    }
  }
}
</script>

<style scoped lang="scss">
.app-container {
  padding: 20px;
}

.el-card {
  margin-bottom: 20px;
}

.el-pagination {
  float: right;
  margin: 20px;
}
</style>
